require(['./config'],()=>{
    require(['swiper','template','header','footer','jquery'],(Swiper,template,header,footer)=>{
        
        class Cart{
            constructor(){
                this.prodList=[]
                this.allCount=0
                this.allPrice=0
                this.checked=true //是否全选
                this.init()
                this.init1()
            }
            init1(){
                var swiper = new Swiper('.swiper-container', {
                    slidesPerView: 3,
                    spaceBetween: 30,
                    slidesPerGroup: 3,
                    loop: true,
                    loopFillGroupWithBlank: true,
                    pagination: {
                      el: '.swiper-pagination',
                      clickable: true,
                    },
                    navigation: {
                      nextEl: '.swiper-button-next',
                      prevEl: '.swiper-button-prev',
                    },
                  });
            }
            init(){
                footer.init()
        console.log(123);
                
               const prodList=localStorage.getItem('prodList') 
               if(prodList){
                   this.prodList=JSON.parse(prodList)
                   //渲染页面
                   $('tbody').html(template('cartTemplate',{list:this.prodList}))
               
               }else{
                   alert('您的车车是空的哦，快去购物吧!')
                   location.href='http://localhost:2101'
               } 
               this.checkALLState()
               this.computedAll()
               this.delProd()
               this.bindEvent()
               this.selectAll()
            }
            //计算总量和总价
            computedAll(){
                  this.allCount=0
                 this.allPrice=0
                this.prodList.forEach(item =>{
                   if(item.checked){
                       this.allCount+=item.count
                       this.allPrice+=item.price*item.count
                   }
                })
                $('#sum_count').text(this.allCount)
                $('#sum_price').text( this.allPrice.toFixed(2))

            }
            //删除商品
            delProd(){
                const that=this
                $('.del').click(function(){
                    //获取删除重新渲染
                const id=$(this).parent().attr('prodId')-0
                // console.log(id)
                for(let i=0;i<that.prodList.length;i++){
                    if(that.prodList[i].id===id){
                        that.prodList.splice(i,1)
                    }
                }
                //重存渲染
                localStorage.setItem('prodList',JSON.stringify(that.prodList))
                that.init()
                header.changeCount()
                })
            }
            //改变数量
            bindEvent(){
                const that=this
                $(".cart_left").click(function(){
                   that.changeCount('jian',this)
                   return false
                    
                })
                 $(".cart_right").click(function(){
                    that.changeCount('jia',this)
                    return false
                })
            }
            changeCount(str,sjy){
                    const id=$(sjy).parent().parent().parent().attr('prodId')-0
                    for(let i=0;i<this.prodList.length;i++){
                        if(this.prodList[i].id===id){
                           if(str==='jian'){
                            if(this.prodList[i].count>1){
                                this.prodList[i].count--
                            }
                           }else{
                               this.prodList[i].count++
                           }
                            break
                        }
                    }
                    //重存locaStorage渲染页面
                    localStorage.setItem('prodList',JSON.stringify(this.prodList))
                  this.init()
                  header.changeCount()
            }
            //解决跨域问题
    // test

    //全选功能
    selectAll(){
        const that=this
        
        $('.checkAll')[1].onclick=function(){
            $(this).toggleClass('active')
            //判断他有没有这个类名
          that.checked=$(this).hasClass('active')
          for(let i=0;i<that.prodList.length;i++){
              that.prodList[i].checked=that.checked
          }
          localStorage.setItem('prodList',JSON.stringify(that.prodList))
          that.init()
           header.changeCount()
        }
        $('.checkAll')[0].onclick=function(){
            $(this).toggleClass('active')
            //判断他有没有这个类名
          that.checked=$(this).hasClass('active')
          for(let i=0;i<that.prodList.length;i++){
              that.prodList[i].checked=that.checked
          }
          localStorage.setItem('prodList',JSON.stringify(that.prodList))
          that.init()
           header.changeCount()
        }
        const btns=document.querySelectorAll('td .over')
        for(let i=0;i<btns.length;i++){
            btns[i].onclick=function(){

            that.prodList[i].checked=!that.prodList[i].checked

         localStorage.setItem('prodList',JSON.stringify(that.prodList))
         that.init()
              
              that.checkALLState()  
              header.changeCount()
            }
        }
    }
     //每一条选中
     checkALLState(){
         this.checked=this.prodList.every(item=>{
                   return item.checked              
                 })

          this.checked ? $('.checkAll').addClass('active') : $('.checkAll').removeClass('active')
     }

        }
        return new Cart()
    })
})